.asset-card {
  margin-top: 10px;
  .card-item {
    background: white;
    height: 100px;
    width: 300px;
    margin: {
      right: 10px;
      bottom: 10px;
    }
    padding: 5px;
    display: inline-block;
    border: 1px solid #e7e7eb;

    .card-item-player {
      float: left;
      padding: 10px;
    }

    .card-item-name {
      vertical-align: top;
      padding: 5px 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .circle-media-player {
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
    line-height: 0;
    background-color: transparent;
    fill: none;
    stroke: #d7dbdc;
    stroke-width: 3;
    cursor: pointer;
    outline: 0;
  }

  .circle-media-player__foreground {
    stroke: #6e9541;
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }

  .circle-media-player__pause,
  .circle-media-player__play {
    fill: #6e9541;
    stroke-width: 0;
  }
}
